<template>
	<view class="cu-modal" :class="modalName?'show':''">
		<view class="cu-dialog">
			<view class="cu-bar">
				<view class="action" style="font-size: 32rpx; font-weight: bold;">立即免费解锁全部试题+懒人技巧</view>
				<view class="action" @tap="hideModal">
					<text class="cuIcon-roundclose"></text>
				</view>
			</view>
			<view class="form">
				<view class="form-item">
					<view class="label">您的姓名</view>
					<view class="zdy-input">
						<input v-model="queryForm.name" type="text" placeholder="请输入您的姓名" />
					</view>
				</view>
				<view class="form-item" style="margin-top: 40rpx;">
					<view class="label">手机号码</view>
					<view class="zdy-input">
						<input v-model="queryForm.phone" type="number" placeholder="请输入手机号码" />
					</view>
				</view>
				<view class="submit">
					<image src="/static/enroll/lock.png" mode="widthFix" @click="handSubmit"></image>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import {
		doLock
	} from '@/api/home.js'
	export default {
		data() {
			return {
				loading: false,
				modalName: false,
				queryForm: {
					name: '',
					phone: ''
				}
			}
		},
		methods: {
			async handSubmit() {
				const params = this.$u.deepClone(this.queryForm)
				if (!params.name) {
					this.$u.toast('请输入姓名')
					return
				}
				if (!params.phone) {
					this.$u.toast('请输入联系电话')
					return
				}
				if (!this.$u.test.mobile(params.phone)) {
					this.$u.toast('手机号格式不正确')
					return
				}
				if (this.loading) return
				this.loading = true
				const {
					code,
					msg
				} = await doLock(params)
				if (code !== 200) {
					this.$u.toast(msg)
					return
				}
				await this.$store.dispatch('app/getUserInfo')
				this.$u.toast(msg)
				this.loading = false
				this.hideModal()
			},
			showEdit() {
				this.modalName = true
			},
			hideModal() {
				this.modalName = false
				this.queryForm = {
					name: '',
					phone: ''
				}
			},
			handleFileChange(event) {
			    const file = event.target.files[0];
			    // 处理文件
			}
		}
	}
</script>

<style lang="scss" scoped>
	.form {
		margin-top: 40rpx;
		padding: 0 48rpx 30rpx 48rpx;
		text-align: left;

		&-item {
			.label {
				font-size: 32rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #333333;
			}

			.zdy-input {
				margin-top: 24rpx;
				background: #F5F5F5;
				border-radius: 28rpx;
				padding: 24rpx;
				box-sizing: border-box;
			}
		}

		.submit {
			margin-top: 80rpx;

			image {
				width: 606rpx;
				height: auto;
			}
		}
	}
</style>